<template>
  <div>
    <el-header>
      <!--头部的路由-->
      <headerdiv />
    </el-header>
    <div class="center">
      <el-container>
        <div class="left">
          <!--跳转页面 @click="JumpEdit"-->
          <el-button class="cj" @click="drawer = true">创建</el-button>
          <el-drawer
            size="600px"
            :visible.sync="drawer"
            direction="btt"
            class="main"
          >
            <h2>选择你想要创建的场景</h2>
            <div class="total">
              <div class="edit" @click="JumpEdit">
                <img src="../assets/imgs/personal/问卷调查.png" />
                <h3>问卷调查</h3>
                <p>满意度调查、产品调查、市场调查、学生调查</p>
              </div>
              <div class="edit">
                <!--  <img src="../assets/imgs/personal/活动报名.png" />
              <h3>活动报名</h3>
              <p>活动报名、资质审核、结果推送、参会提醒，全流程覆盖</p>
              --></div>
              <div class="edit">
                <!--  <img src="../assets/imgs/personal/投票.png" />
              <h3>投票</h3>
              <p>在线投票、内部评选、教师评选、优秀员工评选</p>-->
              </div>
            </div>
          </el-drawer>
          <div class="zt">
            <h4>导航</h4>
            <ul>
              <li><i class="el-icon-folder"></i>我的表单</li>
              <li><i class="el-icon-share"></i>与我共享</li>
              <li><i class="el-icon-star-off"></i>我的收藏</li>
              <li><i class="el-icon-edit"></i>我为别人填的表单</li>
            </ul>
          </div>
        </div>
        <div class="right">
          <h4>我的表单</h4>
          <br />
          <div class="zft">
            <!-- @click="findId" -->
            <div class="box" v-for="(item, key) in list" :key="key">
              <el-popover
                placement="top-start"
                title="查看当前调查问卷"
                width="200"
                trigger="hover"
                content="你可以查看当前调查问卷,并且发送链接给其他人填写。"
              >
                <h4 id="ck" @click="findId(item.id)" slot="reference">
                  {{ item.formName }}
                </h4>
              </el-popover>

              <!-- 删除按钮 -->
              <el-popconfirm
                confirmButtonText="好的"
                cancelButtonText="不用了"
                icon="el-icon-info"
                iconColor="red"
                title="这是一份调查问卷确定删除吗？"
                @confirm="remove(item.id)"
              >
                <i class="el-icon-delete" id="sc" slot="reference" type="danger"
                  >删除</i
                >
              </el-popconfirm>
              <br />
              <!-- 从数据库中得到当前的这个问卷已经填写了多少份 -->
              <el-popover
                placement="bottom"
                title="查看当前调查问卷填写情况"
                width="200"
                trigger="hover"
                content="你可以查看当前调查问卷的填写情况,包括问卷概述、数据、报表。"
              >
                <!-- <h4 id="ck" @click="findId(item.id)" slot="reference">
                {{ item.formName }}
              </h4> -->
                <span @click="JumpData(item.id)" slot="reference"
                  ><strong>已经填写:{{ item.count }}</strong
                  >数据</span
                >
              </el-popover>
            </div>
            <el-pagination
              :page-count="data.pages"
              :total="data.total"
              class="paging"
              :page-size="9"
              @current-change="findAllData"
            >
            </el-pagination>
          </div>
        </div>
      </el-container>
    </div>
  </div>
</template>
<script>
import { findAllData, findDataId, deleteData } from "../network/index";
export default {
  data() {
    return {
      // 分页
      data: {},
      pageNum: 1,
      drawer: false,
      list: [],
      // 从下往上打开
      drawer: false,
    };
  },
  methods: {
    sx() {},
    JumpEdit() {
      // 跳转到编辑页面  questionnaire
      this.$router.push({ path: "/questionnaire/edit" });
    },
    JumpData(key) {
      // 可以直接修改localStorage的数据
      // 存储到本地存储
      // 数据分析的数据id
      const id = key;
      localStorage.setItem("id", id);
      // 数据分析的数据当前页面
      const pageNum = this.pageNum;
      localStorage.setItem("pageNum", pageNum);
      // 跳转到数据分析页面  Data analysis
      this.$router.push({ path: "/questionnaire/analysis" });
    },
    findAllData(page) {
      // this.reload();
      // console.log(page)
      findAllData({ pageNum: page }).then((res) => {
        if (res != null) {
          // console.log(res.data)
          this.data = res.data;
          // console.log(this.data)
          this.list = res.data.list;
          // console.log(res.data);
        } else {
          console.log("失败...");
        }
      });
    },
    //根据id查询填写表单跳转页面
    findId(id) {
      findDataId({ id: id }).then((res) => {
        if (res.data != null) {
          // console.log('11')
          // console.log(res.data);
          let address =
            "http://zlay.cn1.utools.club/#/questionnaire/answernaire?id=" + id;
          this.$router.push("questionnaire/fillin");
          this.$store.commit("findDataId", res.data);
          // console.log(this.$store.state.findDataId);
          this.$store.commit("index", address);
        } else {
          console.log("跳转失败...");
        }
      });
    },
    // 根据item.id  相当于index来删除数据库中的数据
    remove(index) {
      // console.log('111')
      deleteData({ id: index }).then((res) => {
        if (res != null) {
          // console.log("删除成功..");
          this.$message({
            message: "删除成功",
            type: "success",
          });
          this.findAllData();
        }
      });
    },
  },
  created() {
    this.findAllData();
  },
  mounted() {},
  // 加载组件,进行数据的传输
  components: {
    fillin: () => import(/*webpack*/ "./questionnaire/children/fillin"),
    headerdiv: () => import(/** */ "../components/header"),
  },
};
</script>
<style scoped>
@import "../assets/css/questionnaire/personalCenter.css";
.main {
  text-align: center;
}
.total {
  width: 60vw;
  margin: 0 auto;
  display: flex;
  padding: 20px;
  margin-top: 10px;
}
.total > .edit {
  flex: 1;
  height: 20vh;
  text-align: center;
  padding: 40px;
  background: #f4f4f4;
  transition: all 1s;
}
.total > .edit:nth-child(2) {
  background: #ffffff;
}
.total > .edit:nth-child(3) {
  background: #ffffff;
}
.total > .edit:nth-child(1):hover {
  cursor: pointer;
  box-shadow: 0 0 5px lightslategrey;
}
.total > .edit > img {
  width: 60px;
  height: auto;
  margin-top: 10px;
}
.total > .edit:nth-child(2) {
  margin-left: 20px;
  margin-right: 20px;
}
/**分页 */
.fenye {
  margin: 15px 0px;
  position: relative;
}
</style>